<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('日报分析')"/>
</head>
<body>

<div class="wrapper wrapper-content animated fadeInRight">

<!--    <div class="row" style="height: 60px">-->

<!--        <div class="col-sm-3">-->
<!--            <div class="ibox">-->
<!--                <div class="ibox-content">-->
<!--                    <h5>近一周提交情况</h5>-->
<!--                    &lt;!&ndash;                    <h2>65 000</h2>&ndash;&gt;-->
<!--                    <div id="sparkline2" style="width: 90%"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-sm-3">-->
<!--            <div class="ibox">-->
<!--                <div class="ibox-content">-->
<!--                    <h5>近30天提交情况</h5>-->
<!--                    &lt;!&ndash;                    <h2>680 900</h2>&ndash;&gt;-->
<!--                    <div id="sparkline3" style="width: 90%"></div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-sm-3">-->
<!--            <div class="ibox">-->
<!--                <div class="ibox-content">-->
<!--                    <h5>日填报率：</h5>-->
<!--                    <div class="text-center">-->
<!--                        <div id="sparkline6"></div>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="col-sm-3">-->
<!--            <div class="ibox" style="height: 160px">-->
<!--                <div class="ibox-content">-->
<!--                    <h5>今日已更新</h5>-->
<!--                    <h1 class="no-margins" id="dayupdate" th:object="${dayupdate}"></h1>-->
<!--                    <div class="stat-percent font-bold text-danger"id="total" ><i class="fa fa-level-down"th:object="${total}"></i></div>-->
<!--                    <small>总人数</small>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->

    <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>折线图</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                    <i class="fa fa-wrench"></i>
                                </a>
                                <ul class="dropdown-menu dropdown-user">
                                    <li><a href="#">选项1</a>
                                    </li>
                                    <li><a href="#">选项2</a>
                                    </li>
                                </ul>
                                <a class="close-link">
                                    <i class="fa fa-times"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="echarts" id="echarts-line-chart"></div>
                        </div>
                    </div>
                </div>

    </div>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: peity-js"/>
<th:block th:include="include :: sparkline-js"/>
<script type="text/javascript">
    var url = ctx + "system/report"

    $.ajax({
        url: url + "/lineoption",
        type: "get",
        success: function (result) {
            console.log(result);
            //大图
            $(function () {
                //折线图
                var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                var lineoption = {
                    title: {
                        text: '近30天日报更新情况'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['已更新', '未更新']
                    },
                    grid: {
                        x: 40,
                        x2: 40,
                        y2: 24
                    },
                    calculable: true,
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['前30天','前29天','前28天','前27天','前26天','前25天','前24天','前23天','前22天','前21天'
                                ,'前20天','前19天','前18天','前17天','前16天','前15天','前14天','前13天','前12天','前11天',
                                '前10天','前9天','前8天','前7天','前6天','前5天','前4天','前天','昨天','今天']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                formatter: '{value} '
                            }
                        }
                    ],
                    series: [
                        {
                            name: '已更新',
                            type: 'line',
                            data: result.monthY,
                            markPoint: {
                                data: [
                                    {type: 'max', name: '最大值'},
                                    {type: 'min', name: '最小值'}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        },
                        {
                            name: '未更新',
                            type: 'line',
                            data:result.monthN,
                            markPoint: {
                                data: [
                                    {name: '最低', value: -2, xAxis: 1, yAxis: -1.5}
                                ]
                            },
                            markLine: {
                                data: [
                                    {type: 'average', name: '平均值'}
                                ]
                            }
                        }
                    ]
                };
                lineChart.setOption(lineoption);
                $(window).resize(lineChart.resize);
            });

        }, error: function (err) {
            $.modal.alert(err + "", modal_status.FAIL)
        }
    });

    $(function () {
        $("span.pie").peity("pie", {
            fill: ['#1ab394', '#d7d7d7', '#ffffff']
        })

        $(".line").peity("line", {
            fill: '#1ab394',
            stroke: '#169c81',
        })

        $(".bar").peity("bar", {
            fill: ["#1ab394", "#d7d7d7"]
        })

        $(".bar_dashboard").peity("bar", {
            fill: ["#1ab394", "#d7d7d7"],
            width: 100
        })

        var updatingChart = $(".updating-chart").peity("line", {fill: '#1ab394', stroke: '#169c81', width: 64})

        setInterval(function () {
            var random = Math.round(Math.random() * 10)
            var values = updatingChart.text().split(",")
            values.shift()
            values.push(random)

            updatingChart
                .text(values.join(","))
                .change()
        }, 1000);
    });
</script>
</body>
</html>